<template>
  <q-page class="flex flex-center">
    <div style="width: 90vw" v-if="data.type === 'checkUpdate'">
      <q-item>
        <q-item-section avatar>
          <q-avatar rounded size="80px">
            <img src="/icons/favicon-96x96.png" alt="" />
          </q-avatar>
        </q-item-section>
        <q-item-section>
          <q-item-label class="text-h6">正在检查更新...</q-item-label>
          <q-linear-progress
            :value="data.checkUpdate.progress"
            rounded
            size="10px"
            class="q-mt-md"
          />
        </q-item-section>
      </q-item>
      <div class="flex justify-end q-px-xs">
        <q-btn label="取消" unelevated @click="close" />
      </div>
    </div>
    <div class="text-center q-pa-lg" v-if="data.type === 'isNew'">
      <q-avatar rounded size="50px">
        <img src="/icons/favicon-96x96.png" alt="" />
      </q-avatar>
      <q-item-label class="q-py-lg">当前是最新版本</q-item-label>
      <q-btn
        label="确定"
        unelevated
        color="primary"
        class="full-width"
        @click="close"
      />
    </div>
    <div style="width: 90vw" v-if="data.type === 'download'">
      <q-item>
        <q-item-section avatar>
          <q-avatar rounded size="80px">
            <img src="/icons/favicon-96x96.png" alt="" />
          </q-avatar>
        </q-item-section>
        <q-item-section>
          <q-item-label class="text-h6">正在下载更新...</q-item-label>
          <q-linear-progress
            :value="data.download.progress"
            rounded
            size="10px"
            class="q-mt-md"
          />
        </q-item-section>
      </q-item>
      <div class="flex justify-end q-px-xs">
        <card-footer-buttons :ok="false"></card-footer-buttons>
      </div>
    </div>
  </q-page>
</template>

<script>
import { ipcRenderer } from "electron";
import { createMetaMixin, useQuasar } from "quasar";
import CardFooterButtons from "src/components/CardFooterButtons.vue";
import { defineComponent, nextTick, reactive, ref } from "vue";
import { useRoute } from "vue-router";

export default defineComponent({
  components: { CardFooterButtons },
  name: "PagesUpdatePageVue",
  setup() {
    const $q = useQuasar();
    const $route = useRoute();
    const isNewRef = ref(null);
    const data = reactive({
      title: $route.meta.title,
      type: "download",
      checkUpdate: {
        progress: 0,
      },
      download: {
        progress: 0,
      },
    });

    function checkUpdate() {
      data.type = "checkUpdate";
      data.title = "检查更新";
      data.checkUpdate.progress = 0;
      ipcRenderer.invoke("checkUpdate").then((res) => {
        data.checkUpdate.progress = 1;
        $q.notify(JSON.stringify(res));

        if (res) {
          downloadUpdate();
        } else {
          $q.notify("无需更新");
        }
      });
    }

    function downloadUpdate() {
      data.type = "download";
      data.title = "正在更新";
      data.download.progress = 0;
      ipcRenderer.invoke("startDownload");
      ipcRenderer.on("update-progress", console.log);
    }
    checkUpdate();

    // function startUpdate() {
    //   data.type = "download";
    //   data.title = "正在更新";
    //   ipcRenderer.invoke("download", "http://update.zzzw.top/dingpa-0.0.1.dmg");
    //   ipcRenderer.on("downloads-progress", function (aa) {
    //     console.log(aa);
    //   });
    // }
    // setTimeout(() => {
    //   // data.type = "isNew";
    //   startUpdate();
    //   // nextTick(() => {
    //   //   // ipcRenderer.invoke("operate-window", "destroy");
    //   //   ipcRenderer.invoke("set-tray-menu", "update", { enabled: false });
    //   // });
    // }, 3000);
    return {
      data,
      isNewRef,
      close() {
        ipcRenderer.invoke("operateCurrentWindow", "destroy");
      },
    };
  },
});
</script>
